<template>
	<view class="page">
		<!-- 导航栏 -->
			<freenavbar bgColor="bg-white" fixedStatus>
				<image class="pr-2" slot="right" src="/static/images/my/xj.png" style="width: 50rpx;height: 50rpx;"></image>
			</freenavbar>
		
		<!-- 列表 -->
		<view @click="toInfo">
			<freeListItem size="100" cover="/static/images/index/logo5.jpg" title="福利发布员" showRight="">
				<view class="flex flex-column">
					<text class="text-dark font-lg font-weight-bold">福利发布员</text>
					<text class="text-light-muted font mt-2">微信号: panJQKA2</text>
				</view>
				<view class="" slot="right">
					<text class="iconfont icon-ico pr-3" style="font-size: 40rpx;"></text>
				</view>
			</freeListItem>
		</view>
		
		<!-- 分割线组件 -->
		<freeDivider></freeDivider>
		<!-- 列表 -->
		<freeListItem @click="click" size="50" cover="/static/images/my/zf.png" title="支付" showRight=""/>
		
		<!-- 分割线组件 -->
		<freeDivider></freeDivider>
		<!-- 列表 -->
		<freeListItem @click="click" borderBottom size="50" cover="/static/images/my/sc.png" title="收藏" showRight=""/>
		<freeListItem @click="click" borderBottom size="50" cover="/static/images/my/pyq.png" title="朋友圈" showRight=""/>
		<freeListItem @click="click" borderBottom size="50" cover="/static/images/my/kb.png" title="卡包" showRight=""/>
		<freeListItem @click="click" size="50" cover="/static/images/my/bq.png" title="表情" showRight=""/>
		
		<!-- 分割线组件 -->
		<freeDivider></freeDivider>
		<!-- 列表 -->
		<freeListItem @click="click" size="50" cover="/static/images/my/sz.png" title="设置" showRight=""/>
		
		<!-- 分割线组件 -->
		<freeDivider></freeDivider>
		<!-- 列表 -->
		<view class="uni-list-cell-db">
			<picker @change="bindPickerChange" :range="array" range-key="name">
				<freeListItem @click="click('cj')" borderBottom size="50" cover="/static/images/my/cj.png" :title="getTitle" showRight=""/>
			</picker>
		</view>
		<!-- 列表 -->
		<freeListItem @click="click('zffs')" size="50" cover="/static/images/my/pay.png" title="扣款顺序" showRight=""/>
		
		
		
		
		
		
		<!-- <!-- 悬浮动画组件  animationStatus 可绑定动画效果 1 闹铃效果  2 上下浮动 3转出-向右上 -->
		<freeAnimation :animationStatus="animationStatus" :iconStatus="iconStatus" @event="event" imgUrl="https://static01.imgkr.com/temp/d920d683a78b477184bc4bee2aad1e54.png"/>
		
	</view>
</template>

<script>
	import freenavbar from'@/components/free-ui/free-nav-bar';//顶部导航组件
	import freeListItem from'@/components/free-ui/free-list-item';//顶部导航组件
	import freeDivider from'@/components/free-ui/free-divider'//分割线组件
	import freeAnimation from'@/components/free-ui/free-animation'//悬浮动画组件
	export default {
		components:{freenavbar,freeListItem,freeDivider,freeAnimation},
		data() {
			return {
				fixedStatus:false,//判断导航栏是否固定
				msgNum:0,//消息数量
				str:'',
				
				// 控制但双击
				lastTapTimeoutFunc:null,
				lastTapDiffTime:0,
				iconStatus:true, //图标显示隐藏
				
				array: [
					{
						id:0,
						name:'关闭'
					},
					{
						id:1,
						name:'闹铃'
					},
					{
						id:2,
						name:'浮动'
					},
					{
						id:3,
						name:'关闭动画'
					},
					
				],
				animationName:'闹铃',//动画名称
				animationStatus:1,//动画的值
			}
		},
		computed:{
			getTitle(){ //通过计算属性 将x小标题和后面的数据进行合并  处理
				// let noreadnum = this.msgNum > 0?'('+this.msgNum+')':'';
				return  '切换动画' +' '+ this.animationName
			},
		},
		methods: {
			//切换动画类型
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e)
				var value = e.target.value
				this.iconStatus = value === 0?false:true
				this.animationStatus = value
				
				this.array.forEach((v)=>{
					if(value == v.id){
						this.animationName = v.name
					}
				})
			},
			// 单击或双击 悬浮按钮点击事件
			event() {
			  let _this = this;
			  let curTime = new Date().getTime();
			  let lastTime = _this.lastTapDiffTime;
			  _this.lastTapDiffTime = curTime;
			  //两次点击间隔小于300ms, 认为是双击
			  let diff = curTime - lastTime;
			  if (diff < 300) {
			   	console.log("双击")
				this.iconStatus = false
				clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
			 } else {
			  // 单击事件延时300毫秒执行
			   _this.lastTapTimeoutFunc = setTimeout(function() {
			   	console.log("单击")
				uni.showToast({
					icon:'none',
					title:'花里胡哨,我是假的'
				})
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '/static/audio/zj.mp3';
				innerAudioContext.onPlay(() => {    
				  console.log('开始播放');
				});
			   	}, 300);
			 } 			
			},
			// 子组件传递的事件
			click(e){ 
				switch (e){
					case 'cj':
						// this.iconStatus = true
						break;
					case 'zffs':
						uni.navigateTo({
							url:'/pages/tabbar/my/payment'
						})
						break;
						default:       
				}
				uni.showToast({
					icon:'none',
					title:e
				})
			},
			toInfo(){
				uni.showToast({
					icon:'none',
					title:'跳转个人信息页面'
				})
			}
		}
	}
</script>

<style>
	.page{
		background-color: #fff;
	}
	/*每个页面公共css */
	@import '@/common/free.css';
	@import '@/common/common.css';
	@import '@/common/comicon.css';
	@import '@/common/free-icons.css';
	
</style>
